<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>HTML Elements</title>
  <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
  <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
</head>

<body>
<div class="container c38 hlf-pad lightgray">&nbsp;<a href="index.html" title="Back to the Examples Web Page"><img src="images/arrow_left.png" width="16" alt="Menu"/> Examples</a> | Raxan Framework&nbsp;</div>
<div class="container c38 tpm">
    <h1>Commonly used Elements</h1>
    <hr />

    <p class="large">You can use the master.css library to quickly add style and color to your web site and applications.</p>

    <h2>Boxes and Panel</h2>
    <hr />
    <div class="column c19">
        <div class="box column c5 r5"><strong>Box </strong><br />Lorem ipsum dolor sit amet <a href="#">Click here</a></div>
        <div class="alert column c5 r5" ><strong>Alert </strong><br />Consectetuer adipiscing elit. <a href="#">Click here</a></div>
        <div class="notice column c5 r5 last"><strong>Notice </strong><br />Donec quam felis, ultricies nec <a href="#">Click here</a></div>
        <div class="info column c5 r5 tpm"><strong>Info </strong><br />Donec quam felis, ultricies nec <a href="#">Click here</a></div>
        <div class="success column c5 r5 tpm"><strong>Success</strong><br />Ultricies nec, pellentesque eu <a href="#">Click here</a></div>
        <div class="error column c5 r5 tpm last"><strong>Error</strong><br />Donec quam felis, ultricies nec <a href="#">Click here</a></div>
    </div>

    <div class="column c7">
        <div class="alert column c5 r5" ><strong class="box-title">Alert Title</strong>Consectetuer adipiscing elit. <a href="#">Click here</a></div>
        <div class="success column c5 r5 tpm"><strong class="box-title">Success Title</strong>Ultricies nec, pellentesque eu <a href="#">Click here</a></div>
    </div>

    <div id="pnl1" class="panel column c10 last">
    	<div class="pb1"></div><div class="pb2"></div><div class="pm1">
    		<div class="pnl-header"><strong>&nbsp;Sidebar</strong></div>
    		<div class="pad">
    			<p>
                    Quisque ut velit convallis leo tristique placerat. Quisque congue tortor et urna. Aliquam porta, sapien vehicula fermentum posuere, velit libero faucibus urna, a consequat mi massa sed mauris. Cras velit lorem, pellentesque eu, suscipit a, mollis et, urna.<br />&nbsp;Duis pellentesque
                </p>
    		</div>
    	</div><div class="pb2 pb3"></div><div class="pb1 pb4"></div>
    </div>

    <p class="clear">&nbsp;</p>

    <h2>Headings</h2>
    <hr />
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    <hr class="space" />

    <h2 class="caps">Header with class=&quot;caps&quot;</h2>
    <h2 class="fancy">Header with class=&quot;fancy&quot;</h2>


    <p>&nbsp;</p>

    <h2>Paragraphs, Text &amp; Font Size</h2>
    <hr />
    <p><strong>Normal:</strong> Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis. </p>
    <p class="small"><strong>Small:</strong> Aenean molestie. Nulla sit amet nibh sit amet purus luctus lacinia. Mauris vitae dolor. Mauris eu nunc vel tellus dictum aliquam. Mauris luctus dignissim velit. Nulla convallis risus et turpis. Etiam congue, dolor at aliquam faucibus, lectus arcu posuere elit, quis sodales neque dui a mi. Ut viverra erat quis risus. Suspendisse potenti. In tortor purus, bibendum nec, gravida quis, mattis vel, mauris. Praesent a sem a leo sodales ullamcorper. Nulla facilisi. Vestibulum sagittis malesuada lacus. Etiam consequat sodales mi. Etiam rhoncus volutpat mauris. Donec mauris tortor, congue quis, dapibus quis, ultrices et, risus. In nisi dui, cursus non, ullamcorper sit amet, condimentum id, leo. In felis. Proin gravida lobortis nisl. </p>
    <p class="medium"><strong>Medium:</strong> Maecenas ligula mauris, condimentum ac, fringilla vitae, fringilla vel, enim. Praesent aliquam tortor molestie neque. Praesent in tellus. Vestibulum posuere dolor vitae tellus. Fusce id magna. Pellentesque pharetra orci in sapien. Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est. Vivamus luctus orci non leo. Donec sollicitudin nibh at nisi. Suspendisse lorem. </p>
    <p class="large"><strong>Large:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit. In sit amet augue ac justo dictum mattis. Nunc varius dolor posuere leo. Curabitur condimentum semper odio. Proin sapien. Nulla faucibus faucibus felis. Mauris lobortis massa et augue. </p>

    <p class="caps"><strong>CAPS:</strong> Aliquam augue diam, fermentum eget, pretium sit amet, eleifend vitae, est.</p>
    <p class="highlight"><strong>Highlight:</strong>  Donec ligula. Pellentesque mi lorem, lacinia in, mattis nec, hendrerit ut, elit.</p>

    <p><img class="left hvspace pad border" src="images/flower.jpg" /><strong>Text and Image - left, pad, border &amp; hvspace.</strong> Minim repudiare vulputate ut cum. Has et cibo natum inermis, ei homero takimata repudiare sea, ut errem partem quaestio sed. Saepe scripserit reformidans te nec, no has sonet mollis pericula, quidam detracto appetere nam no. Quo eius utroque at, liber pericula instructior has no. Quo te hinc laudem inermis, has eu aliquip molestie consulatu.
    Natum soluta cum ei, qui no prompta petentium intellegat. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no. Mei te prima viderer ponderum, at dolor soleat forensibus eam. Putant iriure neglegentur ne vim, ex phaedrum intellegebat eum. Ei per philosophia mediocritatem. Natum soluta cum ei, qui no prompta petentium intellegat.</p>

    <p><img class="right hvspace" src="images/flower.jpg" /><strong>Text and Image - right &amp; hvspace.</strong> Minim repudiare vulputate ut cum. Has et cibo natum inermis, ei homero takimata repudiare sea, ut errem partem quaestio sed. Saepe scripserit reformidans te nec, no has sonet mollis pericula, quidam detracto appetere nam no. Quo eius utroque at, liber pericula instructior has no. Quo te hinc laudem inermis, has eu aliquip molestie consulatu.
    Natum soluta cum ei, qui no prompta petentium intellegat. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no. Mei te prima viderer ponderum, at dolor soleat forensibus eam. Putant iriure neglegentur ne vim, ex phaedrum intellegebat eum. Ei per philosophia mediocritatem. Eu eam hinc debitis, nec te quidam adolescens referrentur, sit ubique integre argumentum ut. Latine atomorum delicatissimi nec no.</p>

    <blockquote>
        <p><strong>Blockquote:</strong> Curabitur porta tincidunt tortor. Curabitur aliquet commodo dui. Nam et elit in dui fringilla malesuada. Nam lacinia lectus non quam sollicitudin pellentesque. Cras sed lorem. Vivamus ultrices vulputate ante. In dignissim. Mauris volutpat rutrum ipsum. Aenean quis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh risus, volutpat ac, ornare at, molestie a, lectus. Phasellus at lorem at leo consequat consectetuer. Aliquam vitae felis. </p>
    </blockquote>

    <p>
        <strong>&lt;strong&gt; text</strong><br />
        <dfn>&lt;dfn&gt; definition term</dfn><br />
        <del>&lt;del&gt; deleted text</del><br />
        <em>&lt;em&gt; emphasis</em>
    </p>

<pre>&lt;pre&gt; preformated text
Line 1 white-space
Line 2 white-space    white-space     white-space
Line 3  tab1    tab2    tab3    tab4
</pre>

<code>&lt;code&gt; code
function main(){
    var start, i;
    start = new Date();
    alert(start);
    for (i=0; i<100; i++) {
        window.status = "Row " + i;
    }
}
</code>

    <hr class="space" />
    <p>
        <tt>&lt;tt&gt; Teletype text<br />
        Sample monospaced text.</tt>
    </p>

    <address>&lt;address&gt; address<br />
        Mary Jane<br />
        P.O. Box 123<br />
        Planet Earth
    </address>

    <p>
        <abbr>&lt;abbr&gt; abbr</abbr><br />
        <acronym>&lt;acronym&gt; acronym </acronym>
    </p>

    <p>&nbsp;</p>

    <h2>Lists</h2>
    <hr />

    <div class="column c10">
        <ul>
            <li>Unordered list items</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3
                <ul>
                    <li>Nested unordered list</li>
                    <li>nested item 2</li>
                    <li>nested item 3</li>
                    <li>nested item 4</li>
                    <li>nested item 5</li>
                    <li>nested item 6</li>
                </ul>
            </li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>

    <div class="column c9">
        <ol>
            <li>Ordered list items</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3
                <ol>
                    <li>Nested Ordered list</li>
                    <li>nested item 2</li>
                    <li>nested item 3</li>
                    <li>nested item 4</li>
                    <li>nested item 5</li>
                    <li>nested item 6</li>
                </ol>
            </li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ol>
    </div>

    <div class="column c8">
        <ol>
            <li>Ordered/Unordered</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3
                <ul>
                    <li>Nested list</li>
                    <li>nested item 2</li>
                    <li>nested item 3
                        <ul>
                            <li>item 1</li>
                            <li>item 2</li>
                        </ul>
                    </li>
                    <li>nested item 4</li>
                </ul>
            </li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ol>
    </div>

    <div class="column c9 last">
        <ul>
            <li>item 1
                <ul>
                    <li>item 1</li>
                    <li>item 2
                        <ul>
                            <li>item 1</li>
                            <li>item 2
                                <ul>
                                    <li>item 1</li>
                                    <li>item 2</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </div>

    <p class="clear">&nbsp;</p>

    <h2>Tables &amp; Buttons</h2>
    <hr />

    <table class="column border c20" border="0" cellspacing="0"  cellpadding="0" summary="Basic table with caption">
        <caption>Basic table with caption</caption>
        <thead>
            <tr>
                <th>Name</th><th>Color</th><th>Qty</th><th>Price</th><th>Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bread</td><td>White</td><td>2 Lbs</td><td>$12.40</td><td>CC</td>
            </tr>
            <tr class="even">
                <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td>$8.20</td><td>DB</td>
            </tr>
            <tr>
                <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td>$21.50</td><td>Cash</td>
            </tr>
            <tr class="even">
                <td>Bun</td><td>Brown</td><td>3 Lbs</td><td>$6.50</td><td>Cash</td>
            </tr>
        </tbody>
    </table>

    <table class="column border c17 last" border="0" cellspacing="0" cellpadding="0" summary="Table with header class">
        <caption class="white">Table with header class</caption>
        <thead>
            <tr class="header">
                <th>Name</th><th>Color</th><th>Qty</th><th>Price</th><th>Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bread</td><td>White</td><td>2 Lbs</td><td>$12.40</td><td>CC</td>
            </tr>
            <tr class="even">
                <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td>$8.20</td><td>DB</td>
            </tr>
            <tr>
                <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td>$21.50</td><td>Cash</td>
            </tr>
            <tr class="even">
                <td>Flour</td><td>White</td><td>3 Lbs</td><td>$6.50</td><td>Cash</td>
            </tr>
        </tbody>
    </table>

    <table class="column border c20" border="0" cellspacing="0"  cellpadding="0" summary="Table with sort class">
        <caption class="white">Table with sort class</caption>
        <thead>
            <tr>
                <th>Name</th><th>Color</th><th>Qty</th><th>Price</th><th>Payment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Flour</td><td>Brown</td><td>3 Lbs</td><td class="sort">$6.50</td><td>Cash</td>
            </tr>
            <tr class="even">
                <td>Butter</td><td>Yellow</td><td>1 Lbs</td><td class="sort">$8.20</td><td>DB</td>
            </tr>
            <tr>
                <td>Bread</td><td>White</td><td>2 Lbs</td><td class="sort">$12.40</td><td>CC</td>
            </tr>
            <tr class="even">
                <td>Milk</td><td>Cherry</td><td>4 Qtr</td><td class="sort">$21.50</td><td>Cash</td>
            </tr>
        </tbody>
    </table>

     <div class="column c15 prepend1 last">
        <p>Buttons</p>
        <button class="button ok">Ok</button>&nbsp;
        <button class="button process">Process</button>&nbsp;
        <button class="button cancel">Cancel</button><br /><br />

        <button class="button continue">Continue</button>&nbsp;
        <button class="button">Button</button>&nbsp;
        <button class="button disabled">Disabled</button>&nbsp;<br /><br />

        <a href="#" class="button">Link Button</a>
        &nbsp;
     </div>

	<p class="clear">&nbsp;</p>

    <h2>Paddings, Margins &amp; Borders</h2>
    <hr />

	<div class="column c7 border"><strong>Border</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	<div class="column c7 tpb"><strong>Top Border (tpb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	<div class="column c7 rtb"><strong>Right Border (rtb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	<div class="column c7 bmb"><strong>Bottom Border (bmb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	<div class="column c7 ltb"><strong>Left Border (ltb)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>

    <hr class="space" />

    <div class="column c10 hlf-pad lightgray"><strong>Half Padding (hlf-pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>
	<div class="column c10 pad lightgray"><strong>Padding (pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>
	<div class="column c10 dbl-pad lightgray"><strong>Double Padding (dbl-pad)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.</div>

    <hr class="space" />

	<div class="column c6 border ">
		<div class="margin lightgray"><strong>Margin</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	</div>

	<div class="column c6 border ">
		<div class="tpm lightgray"><strong>Top Margin (tpm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	</div>

	<div class="column c6 border ">
		<div class="rtm lightgray"><strong>Right Margin (rtm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	</div>

	<div class="column c6 border ">
		<div class="bmm lightgray"><strong>Bottom Margin (bmm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	</div>

	<div class="column c6 border ">
		<div class="ltm lightgray"><strong>Left Margin (ltm)</strong> <br />Aliquam ultricies libero nec nisl. Donec at leo ut eros posuere facilisis. </div>
	</div>

	<p class="clear">&nbsp;</p>

    <h2>Containers and Columns</h2>
    <hr />

    <div class="container border">
        <div class="column c10 silver">
            <strong>Column 1</strong><br />
            Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
        </div>
        <div class="column c10 silver">
            <strong>Column 2</strong><br />
            Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
        </div>
        <div class="column c10 silver">
            <strong>Column 3</strong><br />
            Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
        </div>
        <div class="column c21 silver prepend-top">
            <strong>Column 4</strong><br />
            Donec at leo ut eros posuere facilisis. Donec eget arcu in felis tristique dapibus. Aliquam erat volutpat.
        </div>
    </div>

	<p class="clear">&nbsp;</p>

    <hr />

    <p class="medium">The Rich Ajax Application Framework. Visit <a href="http://raxanpdi.com">http://raxanpdi.com</a></p>

</div>

</body>

</html>
